<template>
  <div class="plan">
    <header>
      <div class="sliderBox">
        <el-carousel height="340px" arrow="never">
          <el-carousel-item
            v-for="(item,index) in picList"
            :key="index">
            <img :src="item.src" alt="">
          </el-carousel-item>
        </el-carousel>
      </div>
    </header>
    <main>
<!--      推荐-->
      <div class="recommend">
        <div class="container">
          <div class="newTestRec">
            <a href="">
              <h4>新高考指南推荐</h4>
              <p>指导选科，xxxx</p>
            </a>
          </div>
          <div class="seniorClass">
            <a href="">
              <h4>高中生涯规划课</h4>
              <p>跟随一线老师学习，xxxxx</p>
            </a>
          </div>
        </div>
      </div>
<!--      生涯课堂-->
      <div class="careerClass">
        <div class="container">
          <div class="title">
            <div class="titleName">{{careerClass.titleName}}</div>
            <div class="titleList">
              <ul>
                <li
                  v-for="(item,index) in careerClass.titleList"
                  :key="index"
                  @mouseover="showCareerClassCont(item.id)"
                  :class="item.isOnMouse?'onMouse':''">
                  {{item.name}}
                </li>
              </ul>
            </div>
          </div>
          <div class="content">
            <p
              v-for="(item,index) in careerClass.titleList"
              :key="index"
              v-show="item.isOnMouse">
              <span>{{item.content}}</span>
            </p>
          </div>
        </div>
      </div>
<!--      生涯工具-->
      <div class="careerTool">
        <div class="container">
          <div class="title">
            <div class="titleName">{{careerTool.titleName}}</div>
          </div>
          <div class="content">
            <div class="toolList">
              <ul>
                <li
                  v-for="(item,index) in careerTool.titleList"
                  :key="index">
                  <a href="">
                    <div
                      :style="{backgroundImage: 'url(' + item.src + ')'}"
                      class="toolBox">
                      <h4 class="toolName">{{item.name}}</h4>
                      <p>{{item.content}}</p>
                    </div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
<!--      生涯资讯-->
      <div class="careerInfo">
        <div class="container">
          <div class="title">
            <div class="titleName">{{careerInfo.titleName}}</div>
            <div class="titleList">
              <ul>
                <li
                  v-for="(item,index) in careerInfo.titleList"
                  :key="index"
                  @mouseover="showCareerInfoCont(item.id)"
                  :class="item.isOnMouse?'onMouse':''">
                  {{item.name}}
                </li>
              </ul>
            </div>
          </div>
          <div class="content">
            <p
              v-for="(item,index) in careerInfo.titleList"
              :key="index"
              v-show="item.isOnMouse">
              <span>{{item.content}}</span>
            </p>
          </div>
        </div>
      </div>
<!--      快捷入口-->
      <div class="quickEntry">
        <div class="container">
          <div class="entryList">
            <div
              v-for="(item,index) in careerEnter"
              :key="index"
              class="entryBox"
              @mouseover="showCareerEnterCont(item.className)">
              <a :class="item.isOnMouse?'onMouse':''" href="">
                <i :class="item.className"></i>
                <p>{{item.content}}</p>
              </a>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
    export default {
        name: "plan",
        data() {
            return {
                picList: [
                    {'src' : 'https://bbsatta.ewt360.com/group2/M00/F1/CD/rBC952HOeNWAdH5aAAPI9O4GLi8621.png'},
                    {'src' : 'https://bbsatta.ewt360.com/group2/M00/F1/CD/rBC952HOeNWAdH5aAAPI9O4GLi8621.png'}
                ],
                careerClass: {
                    'titleName': 'Career Class',
                    'titleList': [
                        {'name': 'Career Plan', 'id':1, 'isOnMouse': true, 'content': 'Career Plan ’s content. '},
                        {'name': 'Technical Analysis', 'id':2, 'isOnMouse': false, 'content': 'Technical Analysis ’s content. '},
                        {'name': 'Voluntary Report', 'id':3, 'isOnMouse': false, 'content': 'Voluntary Report ’s content. '},
                        {'name': 'University Mien', 'id':4, 'isOnMouse': false, 'content': 'University Mien ’s content. '},
                        {'name': 'All', 'id':5, 'isOnMouse': false, 'content': 'All ’s content. '},
                    ]
                },
                careerTool: {
                    'titleName': 'Career Tool',
                    'titleList': [
                        {'name': 'Career Estimate', 'id':1, 'isOnMouse': true, 'content': 'Career Estimate ’s interpretation. ', 'src': require('../../assets/img/career_t1.png')},
                        {'name': 'Career Treasury', 'id':2, 'isOnMouse': false, 'content': 'Career Treasury ’s interpretation. ', 'src': require('../../assets/img/career_t2.png')},
                        {'name': '6s3 Intellect CSub', 'id':3, 'isOnMouse': false, 'content': '6s3 Intellect CSub ’s interpretation. ', 'src': require('../../assets/img/career_t3.png')},
                        {'name': 'Voluntary Report', 'id':4, 'isOnMouse': false, 'content': 'Voluntary Report ’s interpretation. ', 'src': require('../../assets/img/career_t4.png')},
                    ]
                },
                careerInfo: {
                    'titleName': 'Career Info',
                    'titleList': [
                        {'name': 'Career Known', 'id':1, 'isOnMouse': true, 'content': 'Career Known ’s content. '},
                        {'name': 'Major And Career', 'id':2, 'isOnMouse': false, 'content': 'Major And Career ’s content. '},
                        {'name': 'Career Dynamic', 'id':3, 'isOnMouse': false, 'content': 'Career Dynamic ’s content. '},
                        {'name': 'Ranking List', 'id':4, 'isOnMouse': false, 'content': 'Ranking List ’s content. '},
                        {'name': 'Voluntary Report', 'id':5, 'isOnMouse': false, 'content': 'Voluntary Report ’s content. '},
                        {'name': 'All', 'id':6, 'isOnMouse': false, 'content': 'All ’s content. '},
                    ]
                },
                careerEnter: [
                    {'className': 'newVolunteer', 'content': 'New Volunteer', 'isOnMouse': false },
                    {'className': 'checkRank', 'content': 'Check Ranking', 'isOnMouse': false },
                    {'className': 'careerEstimate', 'content': 'Career Estimate', 'isOnMouse': false },
                    {'className': 'universityInfoBase', 'content': 'University Info Base', 'isOnMouse': false },
                    {'className': 'majorInfoBase', 'content': 'Major Info Base', 'isOnMouse': false },
                    {'className': 'careerInfoBase', 'content': 'Career Info Base', 'isOnMouse': false }
                ]
            }
        },
        created() {

        },
        methods: {
            showCareerClassCont(id) {
                this.careerClass.titleList.forEach(item => {
                    item.isOnMouse = false;
                    if(item.id===id) {
                        item.isOnMouse = true;
                    }
                })
            },
            showCareerInfoCont(id) {
                this.careerInfo.titleList.forEach(item => {
                    item.isOnMouse = false;
                    if(item.id===id) {
                        item.isOnMouse = true;
                    }
                })
            },
            showCareerEnterCont(name) {
                this.careerEnter.forEach(item => {
                    item.isOnMouse = false;
                    if(item.className===name) {
                        item.isOnMouse = true;
                    }
                })
            }
        }
    }
</script>

<style scoped lang="scss">
  @import '../../styles/common.scss';
  @import '../../styles/plan/plan.scss';
</style>